<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 菜品详情</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 菜品图片 -->
            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="蔬菜沙拉" class="dish-detail-image">
            
            <!-- 菜品信息 -->
            <div class="dish-detail-header">
                <div class="dish-detail-title">蔬菜沙拉</div>
                <div class="dish-detail-meta">
                    <div>
                        <span class="lucide-clock"></span>
                        <span>15分钟</span>
                    </div>
                    <div>
                        <span class="lucide-flame"></span>
                        <span>180千卡</span>
                    </div>
                    <div>
                        <span class="lucide-utensils"></span>
                        <span>简单</span>
                    </div>
                </div>
                <div style="color: var(--primary-color); font-weight: 600; font-size: 18px;">¥18</div>
            </div>
            
            <!-- 菜品描述 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">简介</div>
                <p>新鲜蔬菜搭配特制沙拉酱，富含多种维生素和膳食纤维，是一道健康低卡的轻食料理。适合减肥期间食用，也可作为正餐的配菜。</p>
            </div>
            
            <!-- 食材列表 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">食材</div>
                <ul class="ingredients-list">
                    <li class="ingredient-item">
                        <span>生菜</span>
                        <span>100g</span>
                    </li>
                    <li class="ingredient-item">
                        <span>圣女果</span>
                        <span>50g</span>
                    </li>
                    <li class="ingredient-item">
                        <span>黄瓜</span>
                        <span>1根</span>
                    </li>
                    <li class="ingredient-item">
                        <span>红洋葱</span>
                        <span>1/4个</span>
                    </li>
                    <li class="ingredient-item">
                        <span>橄榄油</span>
                        <span>15ml</span>
                    </li>
                    <li class="ingredient-item">
                        <span>柠檬汁</span>
                        <span>10ml</span>
                    </li>
                    <li class="ingredient-item">
                        <span>盐</span>
                        <span>适量</span>
                    </li>
                    <li class="ingredient-item">
                        <span>黑胡椒</span>
                        <span>适量</span>
                    </li>
                </ul>
            </div>
            
            <!-- 制作步骤 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">制作步骤</div>
                <ol class="steps-list">
                    <li class="step-item">
                        <div class="step-number">1</div>
                        <div>将生菜洗净，沥干水分后撕成小块</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">2</div>
                        <div>圣女果洗净后切成两半</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">3</div>
                        <div>黄瓜去皮切成薄片</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">4</div>
                        <div>红洋葱切成细丝</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">5</div>
                        <div>将所有蔬菜混合在一个大碗中</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">6</div>
                        <div>将橄榄油、柠檬汁、盐和黑胡椒混合制成沙拉酱</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">7</div>
                        <div>将沙拉酱均匀淋在蔬菜上，轻轻拌匀即可</div>
                    </li>
                </ol>
            </div>
            
            <!-- 营养成分 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">营养成分表（每100g）</div>
                <table class="nutrition-table">
                    <tr>
                        <th>热量</th>
                        <td>90千卡</td>
                    </tr>
                    <tr>
                        <th>蛋白质</th>
                        <td>2.5g</td>
                    </tr>
                    <tr>
                        <th>脂肪</th>
                        <td>7.5g</td>
                    </tr>
                    <tr>
                        <th>碳水化合物</th>
                        <td>3.8g</td>
                    </tr>
                    <tr>
                        <th>膳食纤维</th>
                        <td>2.2g</td>
                    </tr>
                    <tr>
                        <th>维生素C</th>
                        <td>42mg</td>
                    </tr>
                    <tr>
                        <th>钙</th>
                        <td>36mg</td>
                    </tr>
                    <tr>
                        <th>钾</th>
                        <td>285mg</td>
                    </tr>
                </table>
            </div>
            
            <!-- 小贴士 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">烹饪小贴士</div>
                <p>1. 可以根据个人口味添加其他蔬菜，如胡萝卜、甜椒等。</p>
                <p>2. 也可以加入少量的坚果或奶酪增加风味。</p>
                <p>3. 蔬菜沙拉最好现做现吃，保持新鲜脆嫩的口感。</p>
            </div>
            
            <!-- 操作按钮 -->
            <div class="dish-actions-fixed">
                <button class="button ghost" style="flex: 1;" onclick="toggleFavorite(this)">
                    <span class="lucide-heart" id="favorite-icon"></span>
                    <span>收藏</span>
                </button>
                <button class="button" style="flex: 2;">
                    <span class="lucide-shopping-cart" style="margin-right: 5px;"></span>
                    <span>加入购物车</span>
                </button>
            </div>
        </div>
        
        <!-- 返回按钮 -->
        <div style="position: absolute; top: 44px; left: 15px; z-index: 100;">
            <a href="kitchen.html" style="width: 36px; height: 36px; background-color: rgba(255,255,255,0.8); border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                <span class="lucide-arrow-left"></span>
            </a>
        </div>
    </div>
    
    <script>
        function toggleFavorite(button) {
            const icon = document.getElementById('favorite-icon');
            if (button.classList.contains('active')) {
                button.classList.remove('active');
                button.style.color = '';
                button.style.borderColor = '';
            } else {
                button.classList.add('active');
                button.style.color = '#E91E63';
                button.style.borderColor = '#E91E63';
            }
        }
    </script>
</body>
</html> 